<template>
  <div class="add_oil">
    <div class="select_wrapper">
      <div v-for="(item, index) in SearchData" :key="index">
        <Select :data="item.data" :value.sync="item.value1"></Select>
      </div>
    </div>
    <div class="item_wrapper">
      <Item></Item>
      <Item></Item>
      <Item></Item>
      <Item></Item>
      <Item></Item>
    </div>
  </div>
</template>

<script>
import Item from "./Item";
import Select from "./Select";

export default {
  components: {
    Item,
    Select
  },
  data() {
    return {
      SearchData: [
        {
          value1: ["6"],
          data: [
            {
              value: "6",
              label: "6km内"
            },
            {
              value: "10",
              label: "10km内"
            },
            {
              value: "15",
              label: "15km内"
            },
            {
              value: "20",
              label: "20km内"
            },
            {
              value: "50",
              label: "50km内"
            }
          ]
        },
        {
          value1: [],
          data: [
            {
              value: "qiyou",
              label: "汽油",
              children: [
                {
                  value: "90#",
                  label: "90#"
                },
                {
                  value: "92#",
                  label: "92#"
                },
                {
                  value: "95#",
                  label: "95#"
                },
                {
                  value: "98#",
                  label: "98#"
                },
                {
                  value: "101#",
                  label: "101#"
                }
              ]
            },
            {
              value: "chaiyou",
              label: "柴油",
              children: [
                {
                  value: "-40#",
                  label: "-40#"
                },
                {
                  value: "-35#",
                  label: "-35#"
                },
                {
                  value: "-30#",
                  label: "-30#"
                },
                {
                  value: "-20#",
                  label: "-20#"
                },
                {
                  value: "-10#",
                  label: "-10#"
                },
                {
                  value: "0#",
                  label: "0#"
                }
              ]
            },
            {
              value: "tianranqi",
              label: "天然气",
              children: [
                {
                  value: "CNG",
                  label: "CNG"
                },
                {
                  value: "LNG",
                  label: "LNG"
                }
              ]
            }
          ]
        },
        {
          value1: [],
          data: [
            {
              value: "intelligent_sort",
              label: "智能排序"
            },
            {
              value: "distance_sort",
              label: "距离优先"
            },
            {
              value: "price_sort",
              label: "价格优先"
            }
          ]
        },
        {
          value1: [],
          data: [
            {
              value: "all",
              label: "全部"
            },
            {
              value: "pinpaiyouxuan",
              label: "品牌优选"
            },
            {
              value: "qiaopai",
              label: "壳牌"
            },
            {
              value: "zhongguohaiyou",
              label: "中国海油"
            },
            {
              value: "zhongguohangyou",
              label: "中国航油"
            },
            {
              value: "jiadeshi",
              label: "加德士"
            },
            {
              value: "jindunshihua",
              label: "金盾石化"
            },
            {
              value: "zhongchengliansuo",
              label: "众诚连锁"
            },
            {
              value: "heshunshiyou",
              label: "和顺石油"
            },
            {
              value: "daqiaoshihua",
              label: "大桥石化"
            },
            {
              value: "xiangzhongshiyou",
              label: "湘中石油"
            },
            {
              value: "meifushiyou",
              label: "美福石油"
            },
            {
              value: "qianglinshihua",
              label: "强林石化"
            },
            {
              value: "zhongtunengyuan",
              label: "中图能源"
            },
            {
              value: "yunlingshihua",
              label: "云岭石化"
            },
            {
              value: "yuefushihua",
              label: "悦孚石化"
            },
            {
              value: "dongmingshihua",
              label: "东明石化"
            },
            {
              value: "广西百祥石油",
              label: "广西百祥石油"
            },
            {
              value: "yanchangshiyou",
              label: "陕西延长石油"
            }
          ]
        }
      ]
    };
  }
};
</script>

<style lang="stylus" scoped>
.add_oil {
  padding: 5px 10px;
}

.select_wrapper {
  display: flex;
  width: 100%;
  position: fixed;
  top: 41.5px;
  left: 0px;
}

.item_wrapper {
}
</style>
